<template>
    <div id="action-bar">
        <div class="left">
            <el-button type="primary" plain @click="addFn"><el-icon class="btn">
                    <Plus />
                </el-icon>新增</el-button>
            <el-button type="success" plain @click="editFn" :disabled="btnFlagArr.length !== 1"><el-icon class="btn">
                    <Edit />
                </el-icon>修改</el-button>
            <el-button type="danger" plain :disabled="btnFlagArr.length === 0" @click="delFn"><el-icon class="btn">
                    <Delete />
                </el-icon>删除</el-button>
            <el-button type="warning" plain @click="touchDerive"><el-icon class="btn">
                    <Download />
                </el-icon>导出</el-button>
        </div>
        <div class="right">
            <el-tooltip effect="dark" :content="txt" placement="top">
                <el-button :icon="Search" circle @click="flagFn" />
            </el-tooltip>
            <el-tooltip effect="dark" content="刷新" placement="top">
                <el-button :icon="Refresh" circle @click="getList()" />
            </el-tooltip>
        </div>
    </div>
</template>

<script setup>
import { Search, Refresh } from '@element-plus/icons-vue'
import { computed } from 'vue'

const props = defineProps(['btnFlagArr', 'getList'])

// 触发删除功能
const emit = defineEmits(['delFn', 'touchDerive', 'editPrepare'])
const delFn = () => {
    emit('delFn', props.btnFlagArr)
}

// 修改form表单开关
const formFlag = defineModel('formFlag')
const flagFn = () => {
    formFlag.value = !formFlag.value
}

// 触发导出函数
const touchDerive = () => {
    emit('touchDerive')
}

// 接收弹窗开关
const dialogFlag = defineModel('dialogFlag')

// 新增 or 修改
const titFlag = defineModel('titFlag')

// 新增
const addFn = async () => {
    await (titFlag.value = 'add')
    dialogFlag.value = true
}

// 修改
const editFn = async () => {
    await (titFlag.value = 'edit')
    dialogFlag.value = true
    emit('editPrepare')
}

// 判断显示隐藏form文字提示
const txt = computed(() => {
    return formFlag.value ? '隐藏搜索' : '显示搜索'
})

</script>

<style lang="scss" scoped>
#action-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.btn {
    margin-right: 6px;
}
</style>